<template>
  <div class="content">
    <div class="toolbox-title">
      <div style="font-family: '微软雅黑'; font-size: 18px; font-weight: bold"
        >通知公告
      </div>
      <div style="color: #3d7eff; cursor: pointer">更多</div>
    </div>
    <div class="list">
      <div class="list-item" v-for="(item, index) in data" :key="index">
        <a-space :size="20">
          <div
            class="cycle"
            :class="item.state === 1 ? 'blueColor-cycle' : 'greenColor-cycle'"
          >
          </div>
          <div
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              width: 90%;
              white-space: nowrap;
            "
            >{{ item.content }}
          </div>
          <div
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              width: 100px;
              white-space: nowrap;
            "
            >{{ dayjs(item.time).format('YYYY-MM-DD HH:mm:ss') }}
          </div>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import dayjs from 'dayjs';

  const data = [
    {
      key: 1,
      content: '此处为通知公告名称此处为通知公告名称此处为通知公告名称',
      state: 1,
      time: new Date().toJSON(),
    },
    {
      key: 1,
      content: '此处为通知公告名称此处为通知公告名称此处为通知公告名称',
      state: 1,
      time: new Date().toJSON(),
    },
    {
      key: 1,
      content: '此处为通知公告名称此处为通知公告名称此处为通知公告名称',
      state: 1,
      time: new Date().toJSON(),
    },
    {
      key: 1,
      content: '此处为通知公告名称此处为通知公告名称此处为通知公告名称',
      state: 1,
      time: new Date().toJSON(),
    },
    {
      key: 1,
      content: '此处为通知公告名称此处为通知公告名称此处为通知公告名称',
      state: 1,
      time: new Date().toJSON(),
    },
    {
      key: 1,
      content: '此处为通知公告名称此处为通知公告名称此处为通知公告名称',
      state: 1,
      time: new Date().toJSON(),
    },
    {
      key: 1,
      content: '此处为通知公告名称此处为通知公告名称此处为通知公告名称',
      state: 1,
      time: new Date().toJSON(),
    },
  ];
</script>

<style scoped lang="less">
  .content {
    width: 100%;
    height: 325px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    .toolbox {
      &-title {
        width: 100%;
        height: 20%;
        padding: 15px;
        display: flex;
        justify-content: space-between;
      }
    }
    .list {
      width: 100%;
      height: 80%;
      overflow-x: hidden;
      padding: 10px;
      &-item {
        margin-bottom: 20px;
        width: 100%;
        height: 20px;
      }
    }
  }

  .cycle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    content: '';
    display: inline-block;
    top: 3px;
    right: 10px;
  }
  // }

  // 审核中、执行中

  .blueColor-cycle {
    background-color: rgb(228, 228, 228);
  }

  // 已通过

  .greenColor-cycle {
    background-color: #31c273;
  }
</style>
